<template>
	<view class="main">
		<view class="one">
			<view class="border a">
				<view class="left">
					真实姓名
				</view>
				<view class="right">
					<input v-model="bankholder" type="text" value="" placeholder="请输入真实姓名" />
				</view>
			</view>
			<view class="border a">
				<view class="left">
					银行卡号
				</view>
				<view class="right">
					<input v-model="banknumber" type="number" value="" placeholder="请输入银行卡号" />
				</view>
			</view>
			<view class="border a">
				<view class="left">
					开户行
				</view>
				<view class="right">
					<input v-model="bankname" type="text" value="" placeholder="请输入开户行" />
				</view>
			</view>
			<view class="border a">
				<view class="left">
					预留手机号
				</view>
				<view class="right">
					<input v-model="mobile" type="number" value="" placeholder="请输入预留手机号" />
				</view>
			</view>
			<view class="border a">
				<view class="left">
					身份证号
				</view>
				<view class="right">
					<input v-model="IDcard" type="number" value="" placeholder="请输入身份证号" />
				</view>
			</view>
		</view>
		<view class="moren">
			<view class="msg">
				设为默认
			</view>
			<view class="input">
				<image @tap="status = 0" v-if="status == 1" src="@/static/img/Group.png" mode=""></image>
				<image @tap="status = 1" v-else src="@/static/img/noGroup.png" mode=""></image>
			</view>
		</view>
		<view class="cottom_yinsi">
			<radio style="transform:scale(0.7)" color="#EA504F" @click="current = !current" :checked="current"/>
			<text>我已阅读、理解并同意</text> <text @click="routerTo('/pageB/text?name=Agreement&title=用户协议')">《用户协议》</text><text @click="routerTo('/pageB/text?name=Privacy&title=隐私政策')">《隐私协议》</text>
		</view>
		<view class="btn" @tap="confirm">
			确认
		</view>
	</view>
</template>

<script>
	import {
		bankscreate,
		banksread,
		banksedit
	} from '@/api/index.js'
	export default{
		data(){
			return{
				bankname:'',
				banknumber:'',
				bankholder:'',
				mobile:'',
				status:0,
				id:'',
				IDcard:'',
				current: false
			}
		},
		onLoad(e) {
			if(e.id){
				this.id = e.id
				this.getDetail()
			}
		},
		methods:{
			async getDetail(){
				let res = await banksread({
					id:this.id
				})
				console.log(res)
				this.bankname = res.data.bankname
				this.banknumber = res.data.banknumber
				this.mobile = res.data.mobile
				this.bankholder = res.data.bankholder
				this.status = res.data.status
				this.IDcard = res.data.IDcard
			},
			async confirm(){
				if (!this.current) {
					uni.showToast({
						title: '请选中用户协议和隐私协议',
						icon: 'none'
					})
					return
				}
				if(this.id){
					let res = await banksedit({
						bankname:this.bankname,
						banknumber:this.banknumber,
						bankholder:this.bankholder,
						mobile:this.mobile,
						type:1,
						status:this.status,
						id:this.id,
						IDcard:this.IDcard
					})
					if(res.code == 1){
						uni.showToast({
							title:'修改成功',
							icon:'none'
						})
						setTimeout(()=>{
							uni.navigateBack()
						},1000)
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}
				}else{
					let res = await bankscreate({
						bankname:this.bankname,
						banknumber:this.banknumber,
						bankholder:this.bankholder,
						mobile:this.mobile,
						type:1,
						status:this.status,
						IDcard:this.IDcard
					})
					console.log(res)
					if(res.code == 1){
						uni.showToast({
							title:'添加成功',
							icon:'none'
						})
						setTimeout(()=>{
							uni.navigateBack()
						},1000)
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}
				}
			},
			routerTo(url) {
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main{
		min-height: 100vh;
		background-color: #f6f6f6;
		padding: 24rpx;
		::v-deep.input-placeholder{
			color: #000;
		}
		.moren {
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;
		
			.msg {
				font-size: 28rpx;
				color: #000;
				margin-right: 20rpx;
			}
		
			.input {
				image {
					width: 40rpx;
					height: 40rpx;
				}
			}
		}
		.one{
			background-color: #fff;
			border-radius: 7px;
			padding: 24rpx;
			margin-bottom: 17px;
			.border{
				padding-bottom: 15px;
				border-bottom: 1px solid #ddd;
				margin-bottom: 15px;
			}
			.border:last-child{
				margin-bottom: 0;
			}
			.a{
				display: flex;
				align-items: center;
				.left{
					width: 25%;
					// font-size: 14px;
					color: #000;
				}
				.right{
					flex: 1;
					// font-size: 14px;
				}
			}
			input{
				text-align: right;
				color: #000;
			}
		}
		.btn{
			width: 100%;
			padding: 15px;
			text-align: center;
			color: #fff;
			background-color: #ea504f;
			border-radius: 12rpx;
		}
		
		.cottom_yinsi {
			font-size: 20rpx;
			margin: 30rpx 0rpx 30rpx 0rpx;
			color: gray;
			display: flex;
			align-items: center;
		
			image {
				display: inline-block;
				width: 40rpx;
				height: 40rpx;
				position: relative;
				top: 11rpx;
				padding-right: 10rpx;
			}
		
			text {
				font-size: 25rpx;
				color: #666;
			}
		}
	}
</style>